<template>
  <div>
    <el-card>
      <div slot="header" class="flex align-center justify-between">
        <span class="title-icon">文件列表</span>
      </div>
      <el-table size="mini" :data="fileList">
        <el-table-column
          type="index"
          width="44"
          label="序号"
          align="center"
        ></el-table-column>
        <ex-table-column prop="fileTypeId" label="文件类型">
          <template slot-scope="scope">
            {{ publicData.fileTypeMap[scope.row.fileTypeId] }}
          </template>
        </ex-table-column>
        <ex-table-column
          min-width="250"
          prop="fileName"
          label="文件名"
        ></ex-table-column>

        <ex-table-column label="操作">
          <template slot-scope="scope">
            <a
              class="el-icon-view pointer margin-lr-sm"
              download=""
              target="_blank"
              :href="fileUrl + scope.row.fileUrl"
            ></a>
            <a
              class="el-icon-download pointer margin-lr-sm"
              target="_blank"
              @click="
                downloadFile(
                  scope.row.fileUrl,
                  scope.row.fileTypeName,
                  scope.row.fileName
                )
              "
            ></a>
            <i
              class="el-icon-delete pointer margin-lr-sm"
              @click="delFile(scope)"
            ></i>
          </template>
        </ex-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import globalData from '@/utils/config'
import { mapGetters } from 'vuex'
import {
  queryWaybillFileList,
  deleteWaybillFile,
  downloadFile
} from '@/api/waybill'
export default {
  props: ['waybillId'],
  data() {
    return {
      fileUrl: globalData.fileUrl,
      fileList: []
    }
  },
  computed: {
    ...mapGetters(['publicData'])
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const data = await queryWaybillFileList({
        waybillId: parseInt(this.waybillId)
      })
      if (data instanceof Array) {
        this.fileList = data
      }
    },
    async downloadFile(data, type, fileName) {
      if (type === 'pdf') {
        const code = await downloadFile({
          url: this.fileUrl + data
        })
        console.log('code', code)
        if (code) {
          this.exportPdf(code, fileName)
        }
      } else {
        const link = document.createElement('a') // 生成一个a标签。
        link.href = this.fileUrl + data // href属性指定下载链接
        link.target = '_blank'
        link.download = fileName
        link.click() // click()事件触发下载
      }
    },
    exportPdf(data, fileName) {
      let blob = new Blob([data], {
        type: `application/pdf;charset-UTF-8` //word文档为msword,pdf文档为pdf
      })
      let objectUrl = URL.createObjectURL(blob)
      console.log(objectUrl)
      let downEle = document.createElement('a')
      downEle.href = objectUrl
      downEle.setAttribute('download', fileName)
      document.body.appendChild(downEle)
      downEle.click()
    },
    delFile(s) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.saveDel(s)
        })
        .catch(() => {})
    },
    async saveDel(s) {
      const { code, message } = await deleteWaybillFile({ id: s.row.id })
      if (code === 200) {
        this.$message.success('删除成功！')
        this.init()
      } else {
        this.$message.error('删除失败：' + message)
      }
    }
  }
}
</script>

<style></style>
